<script setup>
import { ref, onMounted } from 'vue';
import dayNightButton from "@/components/day-night.vue";
import { ElMessage, ElMessageBox } from "element-plus";

// 定义默认设置
const defaultSettings = {
  selectedColor: 'white',
  isDay: true,
  fontSize: 20,
  selectedFontKind: 'SimSun',
  pageWidth: '800',
  readType: '默认',
};

// 初始化设置，检查本地存储中是否已有保存的设置，否则使用默认设置
const settings = ref({ ...defaultSettings });
const settings2 = ref({ ...defaultSettings });

onMounted(() => {
  const savedSettings = localStorage.getItem('userSettings');
  if (savedSettings) {
    settings.value = { ...defaultSettings, ...JSON.parse(savedSettings) };
  }
});

const emit = defineEmits(['updateIsDay', 'saveSettings']);

const changeDay = () => {
  settings.value.isDay = !settings.value.isDay;
  emit('updateIsDay', settings.value.isDay);
};

const setBorder = (color) => {
  settings.value.selectedColor = color;
};

const fontKindMap = {
  '黑体': 'SimHei',
  '楷体': 'KaiTi',
  '宋体': 'SimSun',
  '雅黑': 'Microsoft Yahei'
};

const setFontKind = (kind) => {
  settings.value.selectedFontKind = fontKindMap[kind];
};

const setPageWidth = (width) => {
  settings.value.pageWidth = width;
};

const setReadType = (type) => {
  settings.value.readType = type;
};

const saveSettings = () => {
  localStorage.setItem('userSettings', JSON.stringify(settings.value));
};

const save = () => {
  ElMessageBox.confirm(
    '您确定保存设置吗',
    'Warning',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      saveSettings();
      settings2.value = { ...settings.value };
      emit('saveSettings', settings2.value);
      ElMessage({
        type: 'success',
        message: '保存成功',
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消保存',
      });
    });
};

const increaseFontSize = () => {
  if (settings.value.fontSize < 40) {
    settings.value.fontSize++;
  } else {
    ElMessage({
      type: 'warning',
      message: '字体大小不能超过 40',
    });
  }
};

const decreaseFontSize = () => {
  if (settings.value.fontSize > 10) {
    settings.value.fontSize--;
  } else {
    ElMessage({
      type: 'warning',
      message: '字体大小不能小于 10',
    });
  }
};
</script>

<template>
  <div class="main">
    <div>
      <p style="font-weight: bolder; font-size: 30px">设置</p>
    </div>
    <!-- <div class="nightLightMode">
      <p>护眼模式</p>
      <day-night-button @click="changeDay"></day-night-button>
    </div> -->
    <div class="bcgColor">
      <p>背景颜色</p>
      <el-avatar class="avatar-red" @click="setBorder('#D5DCCC')"
        :class="{ 'selected': settings.selectedColor === '#D5DCCC' }"></el-avatar>
      <el-avatar class="avatar-green" @click="setBorder('#E4E8D7')"
        :class="{ 'selected': settings.selectedColor === '#E4E8D7' }"></el-avatar>
      <el-avatar class="avatar-brown" @click="setBorder('#E3E7EB')"
        :class="{ 'selected': settings.selectedColor === '#E3E7EB' }"></el-avatar>
      <el-avatar class="" @click="setBorder('#F1EBEE')"
        :class="{ 'selected': settings.selectedColor === '#F1EBEE' }"></el-avatar>
      <el-avatar class="avatar-white" @click="setBorder('white')"
        :class="{ 'selected': settings.selectedColor === 'white' }"></el-avatar>
    </div>
    <div class="font-kind">
      <p>字体形式</p>
      <el-button type="default" size="default" style='font-family: SimHei' @click="setFontKind('黑体')"
        :class="{ 'selected': settings.selectedFontKind === 'SimHei' }">黑体</el-button>
      <el-button type="default" size="default" style='font-family: KaiTi' @click="setFontKind('楷体')"
        :class="{ 'selected': settings.selectedFontKind === 'KaiTi' }">楷体</el-button>
      <el-button type="default" size="default" style='font-family: SimSun' @click="setFontKind('宋体')"
        :class="{ 'selected': settings.selectedFontKind === 'SimSun' }">宋体</el-button>
      <el-button type="default" size="default" style='font-family: Microsoft Yahei' @click="setFontKind('雅黑')"
        :class="{ 'selected': settings.selectedFontKind === 'Microsoft Yahei' }">雅黑</el-button>
    </div>
    <div class="font-size">
      <p>字体大小</p>
      <el-button size="large" type="default" @click="increaseFontSize">+</el-button>
      <span class="font-size-content">{{ settings.fontSize }}</span>
      <el-button size="large" type="default" @click="decreaseFontSize">-</el-button>
    </div>
    <!-- <div class="pageWidth">
      <p>页面宽度</p>
      <el-button type="default" size="default" @click="setPageWidth('640')"
        :class="{ 'selected': settings.pageWidth === '640' }">640</el-button>
      <el-button type="default" size="default" @click="setPageWidth('800')"
        :class="{ 'selected': settings.pageWidth === '800' }">800</el-button>
      <el-button type="default" size="default" @click="setPageWidth('默认')"
        :class="{ 'selected': settings.pageWidth === '默认' }">默认</el-button>
      <el-button type="default" size="default" @click="setPageWidth('1280')"
        :class="{ 'selected': settings.pageWidth === '1280' }">1280</el-button>
    </div> -->
    <div class="readType">
      <p class="readType-p">阅读方式</p>
      <div class="button">
        <el-button type="default" size="default" @click="setReadType('word形式')"
          :class="{ 'selected': settings.readType === 'word形式' }">word形式</el-button>
        <el-button type="default" size="default" @click="setReadType('默认')"
          :class="{ 'selected': settings.readType === '默认' }">默认</el-button>
        <el-button type="default" size="default" @click="setReadType('全文阅读')"
          :class="{ 'selected': settings.readType === '全文阅读' }">全文阅读</el-button>
        <el-button type="default" size="default" @click="setReadType('云文档阅读')"
          :class="{ 'selected': settings.readType === '云文档阅读' }">云文档阅读</el-button>
      </div>
    </div>
    <div class="save">
      <el-button type="primary" size="large" @click="save">保存修改</el-button>
    </div>
  </div>
</template>

<style scoped>
.main {
  margin: 10px;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.bcgColor {
  margin: 20px 20px 20px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  p {
    opacity: 0.5;
    font-size: 15px;
    margin: 10px;
  }
}

.nightLightMode {
  margin: 20px 20px 20px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  p {
    opacity: 0.5;
    font-size: 15px;
    margin: 10px;
  }
}

.avatar-red {
  margin: 10px;
  background-color: #acb4e5;
  /* 设置背景颜色为红色 */
}

.avatar-green {
  margin: 10px;
  background-color: #D5DCCC;
}

.avatar-brown {
  margin: 10px;
  background-color: #e1c8b0;
}

.avatar-gray {
  margin: 10px;
  background-color: #E3E7EB;
}

.avatar-white {
  margin: 10px;
  background-color: white;
}

.selected {
  border: 2px solid red;
  /* 选中时添加红色边框 */
}

.font-kind {
  margin: 20px 20px 20px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  p {
    opacity: 0.5;
    font-size: 15px;
    margin: 10px;
  }
}

.font-size {
  margin: 20px 20px 20px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  p {
    opacity: 0.5;
    font-size: 15px;
    margin: 10px;
  }
}

.font-size-content {
  font-size: 20px;
  margin: 0 30px 0 30px;
  opacity: 0.8;
}

.pageWidth {
  margin: 20px 20px 20px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  p {
    opacity: 0.5;
    font-size: 15px;
    margin: 10px;
  }
}

.readType {
  margin: 20px 20px 20px 0;
  display: flex;
  flex-direction: column;
  /* 将按钮布局改为垂直排列 */
  align-items: center;
  /* 居中对齐 */
}

.button {
  display: flex;
  flex-wrap: wrap;
  /* 允许按钮换行 */
  justify-content: center;
  /* 居中对齐 */
  width: 100%;
  /* 使按钮占满父容器宽度 */
}

.button>el-button {
  width: 200px;
  flex: 1;
  /* 每个按钮均分父容器宽度 */
  max-width: calc(50% - 20px);
  /* 每行最多显示两个按钮，减去按钮的 margin */
  margin: 10px;
  /* 设置按钮之间的间距 */
}

.save {
  display: flex;
  align-items: center;
  margin: 10px 10px 10px 140px;
}
</style>